<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="最小值" placeholder="请输入行数">
      <el-input-number v-model="props.formItem.min" />
    </el-form-item>
    <el-form-item label="最大值" placeholder="请输入行数">
      <el-input-number v-model="props.formItem.max" />
    </el-form-item>
    <el-form-item label="步长" placeholder="请输入行数">
      <el-input v-model.number="props.formItem.step" />
    </el-form-item>
    <el-form-item label="是否只能步长倍数" label-width="140px">
      <el-switch v-model="props.formItem.stepStrictly" />
    </el-form-item>
    <el-form-item label="数值精度" placeholder="请输入行数">
      <el-input-number v-model="props.formItem.precision" />
    </el-form-item>
    <el-form-item label="是否只读">
      <el-switch v-model="props.formItem.readonly" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="使用控制按钮">
      <el-switch v-model="props.formItem.controls" />
    </el-form-item>
    <el-form-item label="控制按钮位置" v-if="props.formItem.controls">
      <el-radio-group v-model="props.formItem.controlsPosition" class="ml-4">
        <el-radio label="">默认</el-radio>
        <el-radio label="right">右侧</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="占位文字">
      <el-input v-model="props.formItem.placeholder" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="Text">
import FormRulesConfig from './FormRulesConfig.vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
</script>
